<template>
  <div class="address">
    <div class="name flex-a"><span>{{ addrInfo ? addrInfo.userName : '' }}</span><span>{{
      addrInfo ? addrInfo.userPhone : '' }}</span></div>
    <div class="addr">{{ addrInfo ? addrInfo.provinceName + addrInfo.cityName + addrInfo.regionName +
      addrInfo.detailAddress : '' }}</div>
    <div class="title">商品清单</div>
  </div>
</template>
  
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import mitt from "./../../../../utils/mitt";
import { } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
export default {
  components: {

  },
  setup() {
    const state = reactive({
      id: '',
      addrInfo: {}
    });
    onMounted(() => {
      mitt.on("address", (val) => {
        state.addrInfo = val
      })
    });
    return { ...toRefs(state) };
  }
};
</script>
<style lang="scss" >
.address {
  div {
    padding: 0 30rpx;
  }

  .name {
    padding: 20rpx 30rpx;

    span:first-child {
      color: #212121;
      font-size: 30rpx;
      margin-right: 10rpx;
    }

    span:last-child {
      color: #808080;
      font-size: 30rpx;
    }
  }

  .addr {
    border-bottom: 1rpx solid #F2F2F2;
    font-size: 30rpx;
    padding-bottom: 20rpx;
  }

  .title {
    padding: 20rpx 30rpx;
    color: #212121;
  }
}
</style>